<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>效果图</title>
    <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.10.4.custom.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <style type="text/css">
        body {
            background: #333;
            margin: 0;
            padding: 0;
        }

        .box {
            position: absolute;
            top: 100px;
            left: 200px;
            width: 460px;
            height: 360px;
        }

        .main {
            position: absolute;
            width: 200px;
            height: 200px;
            border: 1px solid #fff;
            z-index: 2;
            cursor: move
        }

        .minDiv {
            width: 8px;
            height: 8px;
            background: #fff;
            font-size: 0;
            position: absolute;
        }

        .minDiv.left-up {
            top: -4px;
            left: -4px;
            cursor: nw-resize;
        }

        .minDiv.left {
            top: 50%;
            margin-top: -4px;
            left: -4px;
            cursor: e-resize;
        }

        .minDiv.left-down {
            bottom: -4px;
            left: -4px;
            cursor: sw-resize;
        }

        .minDiv.top {
            top: -4px;
            left: 50%;
            margin-left: -4px;
            cursor: n-resize;
        }

        .minDiv.right-up {
            top: -4px;
            right: -4px;
            cursor: ne-resize;
        }

        .minDiv.right {
            top: 50%;
            margin-top: -4px;
            right: -4px;
            cursor: e-resize;
        }

        .minDiv.right-down {
            bottom: -4px;
            right: -4px;
            cursor: se-resize;
        }

        .minDiv.bottom {
            bottom: -4px;
            left: 50%;
            margin-left: -4px;
            cursor: s-resize;
        }

        img {
            position: absolute;
            z-index: 1
        }

        .img1 {
            opacity: 0.5
        }

        .img2 {
            clip: rect(0px, 20px, 100px, 100px);
        }

        #preview {
            position: absolute;
            top: 100px;
            left: 680px;
            width: 460px;
            height: 360px;
        }

        #preview #img3 {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div id="box" class="box">
    <img class="img1" src="js/1.jpg"/>
    <img id="img2" class="img2" src="js/1.jpg"/>
    <div class="main" id="main">
        <div id="left-up" class="minDiv left-up"></div>
        <div id="left" class="minDiv left"></div>
        <div id="left-down" class="minDiv left-down"></div>
        <div id="up" class="minDiv top"></div>
        <div id="right-up" class="minDiv right-up"></div>
        <div id="right" class="minDiv right"></div>
        <div id="right-down" class="minDiv right-down"></div>
        <div id="down" class="minDiv bottom"></div>
    </div>
</div>
<div id="preview">
    <img id="img3" class="img3" src="js/1.jpg"/>
</div>
</body>
</html>
